<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/05.css">
        <style>

            * {
                margin: 0;
                padding: 0;
            }

            body {
                background-color: #ccc;
            }

            h1 {
                float: left;
                height: 80px;
                line-height: 80px;
                font-size: 29px;
                font-weight: 400;
            }

            span {
                font-size: 16px;
                color: #999999;
            }

            .more {
                float: right;
                line-height: 80px;
                color: black;
            }

            .header {
                width: 1260px;
                height: 80px;
                margin: 50px auto 0;
            }

            .content {
                width: 1260px;
                margin: 0 auto;
            }

            a {
                text-decoration: none;
                float: left;
                background-color: white;
                margin-right: 20px;
                text-align: center;
                padding-bottom: 10px;
            }

            a:last-child {
                margin-right: 0
            }

            .title {
                color: #333;
                margin-top: 20px;
                font-size: 21px;
            }

            .desc {
                margin-top: 15px;
                color: #999999;
                font-size: 16px;
            }

            .goodImg {
                width: 300px;
                height: 300px;
            }


        </style>
    </head>
    <body>

        <div class="header">
            <h1>
                人气推荐
                <span>人气爆款 不容错过</span>
            </h1>
            <span class="more">更多 ></span>
        </div>
        <div class="content">
            <a href="#">
                <img class="goodImg" src="images/popular_1.jpg" alt="图片">
                <p class="title">特惠推荐</p>
                <p class="desc">我猜得到你 你的需要</p>
            </a>
            <a href="#">
                <img class="goodImg" src="images/popular_2.jpg" alt="图片">
                <p class="title">爆款推荐</p>
                <p class="desc">我猜得到你 你的需要</p>
            </a>
            <a href="#">
                <img class="goodImg" src="images/popular_3.jpg" alt="图片">
                <p class="title">场景使用一站买全</p>
                <p class="desc">我猜得到你 你的需要</p>
            </a>
            <a href="#">
                <img class="goodImg" src="images/popular_4.jpg" alt="图片">
                <p class="title">领卷中心</p>
                <p class="desc">我猜得到你 你的需要</p>
            </a>
        </div>

    </body>
</html>